import { mapMutations, mapActions, mapState } from "vuex";
import _ from "lodash";
export default {
  data() {
    return {
      vms: {}, //页面组件vue实例
      models: {
        //模型
        entity: {},
      },
      dataSet: {
        //数据集
        svgList: [
          {
            id: "svg1",
            svg: {
              width: 500,
              height: 500,
              x: 0,
              y: 0,
              draggable: true,
            },
            animations: [
              {
                id: "animate1",
                type: "animate",
                params: {
                  attributeName: "fill",
                  from: "white",
                  to: "green",
                  dur: "2s",
                  fill: "freeze",
                  repeatCount: "indefinite",
                  repeatDur: "indefinite",
                  begin: "click+2s",
                  calcMode: "linear",
                  keyTimes:"0;0.5;1",
                  values:"10;50;20",
                  href: "rect",
                },
              },
              {
                id: "tranform1",
                type: "translate",
                params: {
                  from: "50",
                  to: "100",
                  dur: "2s",
                  fill: "freeze",
                  repeatCount: "indefinite",
                  repeatDur: "6s",
                  begin: "click+2s",
                  calcMode: "linear",
                  keyTimes: "0;0.5;1",
                  values: "10;50;20",
                  href: "rect",
                },
              },
              {
                id: "motion",
                type: "motion",
                params: {
                  path: "50",
                  dur: "2s",
                  fill: "freeze",
                  repeatCount: "infinite",
                  repeatDur: "6s",
                  begin: "click+2s",
                  calcMode: "linear",
                  keyTimes: "0;0.5;1",
                  values: "10;50;20",
                  href: "rect",
                },
              },
            ],
            fills: [
              {
                id: "linear1",
                type: "linear",
                values: {
                  x1: "0%",
                  y1: "0%",
                  x2: "100%",
                  y2: "0%",
                  stops: [
                    { pos: "0%", color: "gray", opacity: 1 },
                    { pos: "40%", color: "white", opacity: 1 },
                    { pos: "70%", color: "gray", opacity: 1 },
                    { pos: "90%", color: "white", opacity: 1 },
                    { pos: "100%", color: "gray", opacity: 1 },
                  ],
                },
              },
              {
                id: "radial1",
                type: "radial",
                values: {
                  cx: "70%",
                  cy: "50%",
                  r: "50%",
                  fx: "50%",
                  fy: "50%",
                  stops: [
                    { pos: "0%", color: "gray", opacity: 1 },
                    { pos: "40%", color: "white", opacity: 1 },
                    { pos: "70%", color: "gray", opacity: 1 },
                    { pos: "90%", color: "white", opacity: 1 },
                    { pos: "100%", color: "gray", opacity: 1 },
                  ],
                },
              },
            ],
            filters: [
              {
                id: "point1",
                type: "point",
                values: {
                  x: 0,
                  y: 0,
                  lx: 50,
                  ly: 50,
                  lz: 30,
                  color: "white",
                  fill: "green",
                  scale: 2,
                  constant: 0.8,
                },
              },
            ],
            groups: [
              { id: "1", fill: "", opacity: 1, fillId: "linear1" },
              { id: "2", fill: "blue", opacity: 1 },
            ],
            elements: [
              {
                id: "rect",
                groupId: "1",
                type: "rect",
                values: {
                  x: 0,
                  y: 0,
                  rx: 20,
                  ry: 20,
                  width: 100,
                  height: 100,
                  stoke: "",
                  fillId: "linear1",
                  fill: "green",
                  filter: "point1",
                  "stoke-width": 0,
                },
              },
              {
                id: "semiCircle",
                groupId: "1",
                type: "semiCircle",
                values: {
                  x: 100,
                  y: 100,
                  width: 200,
                  height: 100,
                  stoke: "",
                  fillId:'linear1',
                  fill:'green',
                  filter: "point1",
                  "stoke-width": 0,
                },
              },
            ],
          },
          {
            id: "svg2",
            svg: {
              width: 500,
              height: 500,
              x: 0,
              y: 0,
              draggable: true,
            },
            animations: [],
            fills: [
              {
                id: "linear1",
                type: "linear",
                values: {
                  x1: "0%",
                  y1: "0%",
                  x2: "100%",
                  y2: "0%",
                  stops: [
                    { pos: "0%", color: "gray", opacity: 1 },
                    { pos: "40%", color: "white", opacity: 1 },
                    { pos: "70%", color: "gray", opacity: 1 },
                    { pos: "90%", color: "white", opacity: 1 },
                    { pos: "100%", color: "gray", opacity: 1 },
                  ],
                },
              },
              {
                id: "linear2",
                type: "linear",
                values: {
                  x1: "0%",
                  y1: "0%",
                  x2: "0%",
                  y2: "100%",
                  stops: [
                    { pos: "0%", color: "gray", opacity: 1 },
                    { pos: "40%", color: "white", opacity: 1 },
                    { pos: "70%", color: "gray", opacity: 1 },
                    { pos: "90%", color: "white", opacity: 1 },
                    { pos: "100%", color: "gray", opacity: 1 },
                  ],
                },
              },
              {
                id: "radial1",
                type: "radial",
                values: {
                  cx: "70%",
                  cy: "50%",
                  r: "50%",
                  fx: "50%",
                  fy: "50%",
                  stops: [
                    { pos: "0%", color: "gray", opacity: 1 },
                    { pos: "40%", color: "white", opacity: 1 },
                    { pos: "70%", color: "gray", opacity: 1 },
                    { pos: "90%", color: "white", opacity: 1 },
                    { pos: "100%", color: "gray", opacity: 1 },
                  ],
                },
              },
            ],
            filters: [
              {
                id: "point1",
                type: "point",
                values: {
                  x: 0,
                  y: 0,
                  lx: 50,
                  ly: 50,
                  lz: 30,
                  color: "white",
                  fill: "green",
                  scale: 2,
                  constant: 0.8,
                },
              },
            ],
            groups: [
              { id: "1", fill: "", opacity: 1, fillId: "" },
              { id: "2", fill: "blue", opacity: 1, fillId: "" },
            ],
            elements: [
              {
                id: "rect",
                groupId: "1",
                type: "rect",
                values: {
                  x: 0,
                  y: 0,
                  rx: 0,
                  ry: 0,
                  width: 300,
                  height: 100,
                  stoke: "",
                  fillId: "linear2",
                  fill:'green',
                  filter: "point1",
                  "stoke-width": 0,
                },
              },
              {
                id: "polygon",
                groupId: "1",
                type: "polygon",
                values: {
                  x1: 0,
                  y1: 0,
                  x2: 50,
                  y2: 200,
                  x3: 100,
                  y3: 200,
                  x4: 150,
                  y4: 0,
                  stoke: "",
                  fillId: "linear1",
                  fill: "green",
                  filter: "point1",
                  "stoke-width": 0,
                },
              },
              {
                id: "ellipse",
                groupId: "1",
                type: "ellipse",
                values: {
                  cx: 100,
                  cy: 50,
                  rx: 50,
                  ry: 25,
                  stoke: "",
                  fillId: "linear1",
                  fill: "green",
                  filter: "point1",
                  "stoke-width": 0,
                },
              },
              {
                id: "text",
                groupId: "1",
                type: "text",
                values: {
                  x: 0,
                  y: 0,
                  "font-family": "Arial",
                  "font-size": 250,
                  stoke: "",
                  fillId: "linear1",
                  fill: "green",
                  filter: "point1",
                  stokeWidth: 0,
                  "text-anchor": "start",
                  text: "abc",
                },
              },
            ],
          },
        ],
      },
    };
  },
  provide() {
    return {
      anc: this,
    };
  },
  computed: {},
  created() {
    Object.keys(this.models).map((k) => {
      this.models[k] = {
        clz: null,
        clzs: null,
      };
      this.models[k].clz = this.$modelObject.create(k);
      this.models[k].clzs = this.$modelObject.create(k + "Collection");
    });
  },
  mounted() {
    this.$nextTick(() => {
      if (process.env.NODE_ENV === "development") {
        console.log(this);
      }
    });
  },
  methods: {
    showConfigModal(e) {
      e.preventDefault();
      this.vms.svgConfigModal.show = true;
    },
  },
};
